<template>
    <div>
        <div class="searchInput">
            <div class="kuang">
                <div>
                    地锁编号： <el-input placeholder="请输入地锁编号"></el-input>&emsp;&emsp13;
                </div>
                <div>
                    充电站： <el-select v-model="searchStation" placeholder="请选择">
                        <el-option
                        v-for="item in stationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>&emsp;&emsp13;
            </div>
            <div>
                状态：   <el-select style="width: 116px;" v-model="searchState" placeholder="请选择">
                            <el-option
                            v-for="item in stateOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
            </div>
        </div>
        <div class="btns">
            <el-button class="chaxun">查询</el-button>
            <el-button class="reset">重置</el-button>
        </div>
        </div>
        <div class="addBtn">
            <el-button class="newAdd" @click="addLock"><i class="el-icon-plus"></i>新增</el-button>
        </div>
        <!-- 数据 -->
        <el-table
            :header-cell-style="{background:'#e8efff',color:'#000000'}"
            :data="lockTableData"
            :loading="loading"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="order" label="序号" width="60">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.order }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="gun_number" label="地锁编号">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.lock_number }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="pile_number" label="充电桩编号" width="150">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.pile_number }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="charge_station" label="充电站">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.charge_station }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地锁状态">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        <span v-if="scope.row.state==0">地锁已下降</span>
                        <span v-if="scope.row.state==1">地锁已升起</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="created_time" label="创建时间">
                <template v-slot="scope">
                    <div style="color:#949BBE;">
                        {{ scope.row.created_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template v-slot="scope">
                    <div class="scope" style="color:#949BBE;">
                        <span class="editBtn" @click="goEdit(scope.row.id)">编辑</span>
                        <span class="detailBtn" @click="goDetail(scope.row.id)">详情</span>
                        <span class="deleteBtn" @click="deleteData(scope.row.id)">删除</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination />
        <!-- 添加/详情/编辑 -->
        <el-dialog center :close-on-click-modal="false" width="636px" :visible.sync="newVisible">
            <template slot="title">
                <div class="dialog_title">
                    {{ dialogTitle }}
                </div>
            </template>
            <el-form label-position="right" :rules="rules" ref="ruleFormLock" label-width="120px" :model="gunInfoForm">
                <el-form-item prop="lock_number" label="地锁编号:" >
                    <el-input :disabled="disabled" v-model="gunInfoForm.lock_number" autocomplete="off" placeholder="YLDAA-110"></el-input>
                </el-form-item>
                <el-form-item prop="product_model" label="产品型号:">
                    <el-input :disabled="disabled" v-model="gunInfoForm.product_model" autocomplete="off" placeholder="请输入充电枪名称"></el-input>
                </el-form-item>
                <el-form-item prop="station" label="充电站:">
                    <el-select :disabled="disabled" v-model="gunInfoForm.station" placeholder="请选择">
                        <el-option
                            v-for="item in stationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="pile_number" label="充电桩编号:">
                    <el-select :disabled="disabled" v-model="gunInfoForm.pile_number" placeholder="请选择">
                        <el-option
                            v-for="item in pileNumberOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div v-if="is_detail = true" slot="footer" class="dialog-footer">
                <el-button class="formCancel" @click="newVisible = false">取消</el-button>
                <el-button class="formConfirm" type="primary"  @click="submitGunForm('ruleFormLock')">{{confirmBtnText}}</el-button>
            </div>
        </el-dialog>
        <el-dialog center :close-on-click-modal="false" width="636px" :visible.sync="newDetailVisible">
            <template slot="title">
                <div class="dialog_title">
                    地锁详情
                </div>
            </template>
            <el-form label-position="right" label-width="120px" :model="gunInfoForm">
                <el-form-item prop="lock_number" label="地锁编号:">
                    <el-input disabled v-model="gunInfoForm.lock_number" autocomplete="off" placeholder="YLDAA-110"></el-input>
                </el-form-item>
                <el-form-item prop="product_model" label="产品型号:" >
                    <el-input disabled v-model="gunInfoForm.product_model" autocomplete="off" placeholder="请输入充电枪名称"></el-input>
                </el-form-item>
                <el-form-item prop="station" label="充电站:">
                    <el-select disabled v-model="gunInfoForm.station" placeholder="请选择">
                        <el-option
                            v-for="item in stationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="pile_number" label="充电桩编号:">
                    <el-select disabled v-model="gunInfoForm.pile_number" placeholder="请选择">
                        <el-option
                            v-for="item in pileNumberOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'
    export default {
        components:{
            Pagination
        },
        data() {
            return {
                loading:true,
                disabled:false,
                searchStation:'',
                searchState:'',
                stationOptions: [
                    {
                        value: null,
                        label: '请选择'
                    }, 
                    {
                        value: 1,
                            label: '丰台科技充电站'
                            }, 
                            {
                            value: 0,
                            label: '总部基地充电站'
                            }, 
                        ],
                        stateOptions: [
                            {
                            value: null,
                            label: '请选择'
                            }, 
                            {
                            value: 0,
                            label: '地锁已降下'
                            }, 
                            {
                            value: 1,
                            label: '地锁已升起'
                            }, 
                    ],
                    pileNumberOptions: [
                                {
                                value: null,
                                label: '请选择'
                                }, 
                                {
                                value: 1,
                                label: 'YLD-110'
                                }, 
                                {
                                value: 0,
                                label: 'YLD-110'
                                }, 
                                ],
                    lockTableData: [
                    {
                        order: '1',
                        lock_number: 'FTYLD-113',
                        pile_number: 'YLD-110',
                        charge_station:'丰台科技园充电站',
                        state:0,
                        created_time:'2023.03.03',
                        id:1
                    }
                ],
                dialogTitle:'新增地锁',
                confirmBtnText:"确认",
                newVisible:false,
                newDetailVisible:false,
                gunInfoForm:{}, //充电枪信息
                is_detail:false,
                rules:{
                    lock_number: [
                        { required: true, message: '请输入地锁编号', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    product_model: [
                        { required: true, message: '请输入产品型号', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    station: [
                        { required: true, message: '请选择充电站', trigger: 'change' }
                    ],
                    pile_number: [
                        { required: true, message: '请选择充电桩编号', trigger: 'change' }
                    ],
                }
            }
        },
        methods: {
            submitGunForm(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证完成
                    alert('submit!');
                    this.newVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },

            changeState(){
            },
            addLock(){
              this.newVisible = true
              this.dialogTitle = "新增地锁"
              this.confirmBtnText = "确认"
            },
            goEdit(id){
              this.newVisible = true
              this.dialogTitle = "编辑地锁"
              this.confirmBtnText = "保存"
            },
            
            goDetail(id){
                this.newDetailVisible = true
            },

            deleteData(){
                this.$confirm('您确定删除当前项吗', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    title:'操作提示',
                    center: true
                    }).then(() => {
                        this.$message({
                        type: 'success',
                        message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    
                });
            },
        },
        
    }
</script>

<style lang="less" scoped>
.searchInput{
    text-align: left;
    font-size: 14px;
    height: 25.98px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666 !important;
}
.el-input{
    width: 280px;
    height: 35.98px;
    font-size: 11.97px;
    color: #666666;
    background: #F0F1F6;
}
.el-input__inner{
  background-color: #F0F1F6;  
  background-color: pink !important;  
}
.el-select{
    width: 280px;
    height: 35.98px;
}
.kuang{
    float: left;
}
.btns{
    float: right;
}
.el-button{
    background: transparent;
    border: none;
}
.chaxun{
    background: #165BFF;
    color: white;
}
.reset{
    background: #F0F1F6;
    color: #666666;
}
.addBtn{
    text-align: left;
    margin-top: 32px;
}
.newAdd{
    background: #165BFF;
    color: white;
    width: 92px;
    height: 36px;
}
::v-deep .el-table th > .cell {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}
.editBtn{
    display: inline-block;
    margin-right: 8px;
    color: #09D796;
    cursor: pointer;
}
.detailBtn{
    margin-right: 8px;
    display: inline-block;
    color: #165BFF;
    cursor: pointer;
}
.deleteBtn{
    display: inline-block;
    color: #FA698D;
    cursor: pointer;
}
.confirmButtonClass{
    background: #165bff;
}
#dialog .el-dialog__header {
    padding: 20px 20px 0px;
    background: #165BFF;
    text-align: left;
    font-weight: bold;
}
#dialog .el-dialog__body{
    height: 188px;
}
.formCancel,.formConfirm{
    width: 140px;
    height: 44px;
    border-radius: 4px 4px 4px 4px;
    border: none;
    opacity: 1;
}
.formCancel{
    background: white;
    border: 1px solid #F0F1F6;
}
.formConfirm{
    margin-left: 24px;
    background: #165BFF;
}
.dialog-footer{
    margin-top: -32px;
    text-align: center;
}
.el-dialog .el-input{
    width: 423px;
}
.el-dialog .el-select{
    width: 423px;
}
.dialog_title{
    margin-top: 24px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
}
.kuang>div{
    margin: 5px auto;
    display: inline-block;
}
.el-table{
    margin-top: 32px;
}
</style>